<template>
  <div class="fit column no-wrap task-operation-guide-cls">
    <q-stepper :model-value="-1" alternative-labels class="shadow-1 bg-white-6 q-mb-md" header-class="no-border"
               header-nav @update:modelValue="updateCurrentMainStep">
      <q-step v-for="step in mainSteps" :key="step.value" :color="step.name === currentMainStep ? 'primary' : 'grey-5'"
              :done-icon="step.name" :prefix="step.name" v-bind="step"></q-step>
    </q-stepper>
    <q-splitter v-model="splitterModel" :limits="[0, leftSideWidth]" after-class="q-ml-md overflow-hidden-x q-pb-md"
                before-class="bg-white-6 rounded-borders shadow-1 overflow-hidden-x" class="col full-height"
                separator-class="gradient-separator-y" unit="px">
      <template v-slot:before>
        <q-item v-for="step in childSteps[currentMainStep]" :key="step.name" :active="step.name === currentChildStep"
                active-class="text-primary" class="q-py-md q-px-sm" clickable
                @click.stop="updateCurrentChildStep(step.name)">
          <q-item-section class="col-auto">
            <q-icon :name="step.caption ? 'mdi-map-marker-question' : ''" color="warning" size="1.25rem">
              <q-tooltip v-if="step.caption" v-bind="$tooltipAttr">{{ step.caption }}</q-tooltip>
            </q-icon>
          </q-item-section>
          <q-item-section>
            <qx-tooltip rowsNum="3">{{ step.label }}</qx-tooltip>
          </q-item-section>
        </q-item>
      </template>
      <template v-slot:separator>
        <q-btn color="grey-3" dense padding="1rem .0625rem" unelevated @click="expand = !expand">
          <q-icon :class="expand ? 'rotate-180' : ''" color="grey-7" name="mdi-arrow-split-vertical"
                  size="1.25rem"></q-icon>
        </q-btn>
      </template>
      <template v-slot:after>
        <transition appear name="q-transition--slide-left">
          <div :key="currentChildStep" class="fit max-height-inherit">
            <component :is="currentComponentInfo.component" v-bind="currentComponentInfo.BindAttrs || {}"></component>
          </div>
        </transition>
      </template>
    </q-splitter>
  </div>
</template>
<script setup>
import { i18n } from 'boot/i18n.js'
import RackAsyncNotification from 'src/views/CarrierCore/RackAsyncNotification.vue'
import AppAuth from 'src/views/RCSCore/AppAuth.vue'
import RCSPlugInCtrl from 'src/views/RCSCore/RCSPlugInCtrl.vue'
import TrafficControlProcess from 'src/views/RCSCore/TrafficControlProcess.vue'
import SubTaskList from 'src/views/TaskCore/SubTaskList.vue'
import TaskLimitRule from 'src/views/TaskCore/TaskLimitRule.vue'
import TaskList from 'src/views/TaskCore/TaskList.vue'
import TaskNotificationList from 'src/views/TaskCore/TaskNotificationList.vue'
import TaskParamCtrl from 'src/views/TaskCore/TaskParamCtrl.vue'
import TrafficControlNotification from 'src/views/TaskCore/TrafficControlNotification.vue'
import { computed, inject, ref } from 'vue'

const isXS = inject('isXS')
const leftSideWidth = isXS.value ? 100 : 200

const expand = ref(true)
const currentMainStep = ref('1')
const splitterModel = ref(leftSideWidth)
const currentChildStep = ref('1.1')
const mainSteps = computed(() => {
  return [{
    title: i18n.t('TaskCore.TaskOperationGuide.Step1'), name: '1'
  }, {
    title: i18n.t('TaskCore.TaskOperationGuide.Step2'), name: '2'
  }, {
    title: i18n.t('TaskCore.TaskOperationGuide.Step3'), name: '3'
  }, {
    title: i18n.t('TaskCore.TaskOperationGuide.Step4'), name: '4'
  }]
})
const childSteps = computed(() => {
  return {
    1: [{
      label: i18n.t('TaskCore.TaskOperationGuide.MainStep11'), name: '1.1',
      caption: i18n.t('TaskCore.TaskOperationGuide.MainStep11Caption'), component: TaskParamCtrl,
      BindAttrs: { value: 'GLOBAL_MAX_RUNNING_SPLIT_TASKS' }
    }, {
      label: i18n.t('TaskCore.TaskOperationGuide.MainStep12'), name: '1.2',
      caption: i18n.t('TaskCore.TaskOperationGuide.MainStep12Caption'), component: TaskLimitRule,
      BindAttrs: { activeStage: '0' }
    }, {
      label: i18n.t('TaskCore.TaskOperationGuide.MainStep13'), name: '1.3',
      caption: i18n.t('TaskCore.TaskOperationGuide.MainStep13Caption'), component: TaskParamCtrl,
      BindAttrs: { value: 'TASK_QUEUE_SCHEDULING_ENABLED' }
    }, {
      label: i18n.t('TaskCore.TaskOperationGuide.MainStep14'), name: '1.4',
      caption: i18n.t('TaskCore.TaskOperationGuide.MainStep14Caption'), component: TrafficControlProcess
    }],
    2: [{
      label: i18n.t('TaskCore.TaskOperationGuide.MainStep21'), name: '2.1',
      caption: i18n.t('TaskCore.TaskOperationGuide.MainStep21Caption'), component: RCSPlugInCtrl
    }, {
      label: i18n.t('TaskCore.TaskOperationGuide.MainStep22'), name: '2.2',
      caption: i18n.t('TaskCore.TaskOperationGuide.MainStep22Caption'), component: TaskLimitRule,
      BindAttrs: { activeStage: '1' }
    }, {
      label: i18n.t('TaskCore.TaskOperationGuide.MainStep23'), name: '2.3',
      caption: i18n.t('TaskCore.TaskOperationGuide.MainStep23Caption'), component: TaskParamCtrl,
      BindAttrs: { value: 'GLOBAL_TASK_DISPATCH_LEVEL' }
    }],
    3: [{
      label: i18n.t('TaskCore.TaskOperationGuide.MainStep31'), name: '3.1',
      BindAttrs: { value: 'GLOBAL_TASK_CALLBACK_URL' }, component: TaskParamCtrl
    }, {
      label: i18n.t('TaskCore.TaskOperationGuide.MainStep32'), name: '3.2', component: AppAuth
    }],
    4: [{
      label: i18n.t('TaskCore.TaskOperationGuide.MainStep41'), name: '4.1',
      caption: i18n.t('TaskCore.TaskOperationGuide.MainStep41Caption'), component: TaskList
    }, {
      label: i18n.t('TaskCore.TaskOperationGuide.MainStep42'), name: '4.2',
      caption: i18n.t('TaskCore.TaskOperationGuide.MainStep42Caption'), component: SubTaskList
    }, {
      label: i18n.t('TaskCore.TaskOperationGuide.MainStep43'), name: '4.3',
      caption: i18n.t('TaskCore.TaskOperationGuide.MainStep43Caption'), component: TaskNotificationList
    }, {
      label: i18n.t('TaskCore.TaskOperationGuide.MainStep44'), name: '4.4',
      caption: i18n.t('TaskCore.TaskOperationGuide.MainStep44Caption'), component: TrafficControlNotification
    }, {
      label: i18n.t('TaskCore.TaskOperationGuide.MainStep45'), name: '4.5',
      caption: i18n.t('TaskCore.TaskOperationGuide.MainStep45Caption'), component: RackAsyncNotification
    }]
  }
})
const currentComponentInfo = computed(() => {
  return (childSteps.value[currentMainStep.value] || []).find(item => item.name === currentChildStep.value) || {}
})

const updateCurrentMainStep = stepName => {
  currentMainStep.value = stepName
  currentChildStep.value = (childSteps.value[stepName][0] || {}).name
}
const updateCurrentChildStep = stepName => currentChildStep.value = stepName
</script>
<style lang="scss" scoped>
.q-splitter__before .q-item {
  width: v-bind('`${leftSideWidth}px`')
}
</style>